<template>
  <div class="my-project-container">
    <div class="module-title-container">
      <div class="module-title">项目经历</div>
    </div>

    <div>
      <!-- 项目卡片 - 满天星 -->
      <div class="project-card">
        <div class="project-image">
          <img :src="mantianxing" alt="满天星数据综合平台" />
        </div>
        <div class="project-info-wrapper">
          <div class="project-details-wrapper">
            <div class="project-name-wrapper">
              <div class="project-name">满天星数据综合平台</div>
              <div class="project-tag">
                <a-tag color="processing">主要工作</a-tag>
              </div>
              <div class="project-period">2024.07 - 2025.10</div>
            </div>
            <div class="project-tech-stack-wrapper">
              <div class="project-tech-stack-title">项目技术栈</div>
              <div class="project-tech-stack">
                <a-tag>Vue</a-tag>
                <a-tag>Element UI</a-tag>
                <a-tag>JavaScript</a-tag>
                <a-tag>Less</a-tag>
                <a-tag>LLM</a-tag>
              </div>
            </div>
            <div class="project-desc-wrapper">
              <div class="project-desc-title">项目描述</div>
              <div class="project-desc-content">
                满天星平台是一个主要以管理ITO、BPO、CRM业务、管理员员工生命周期的LLM结合数据综合管理平台。
              </div>
            </div>
            <div class="project-desc-wrapper">
              <div class="project-desc-title">主要工作</div>
              <div class="project-desc-content">
                <ul>
                  <li>
                    承担满天星平台核心业务（员工信息全生命周期链路管理），<b>实现人才资源全流程数字化追踪</b>（待入职→入场→在岗→异动→人才池→离职）。
                  </li>
                  <li>
                    负责满天星平台重点业务——招聘业务，报备招聘业务、简历池数字化建设，实现满天星平台招聘<b
                      >全流程数字化100%。</b
                    >
                  </li>
                  <li>
                    <b>基于DeepSeek R1本地部署</b
                    >，探索落地满天星平台应用场景，深度绑定应用系统功能场景4个（智能客服、人岗匹配、简历分析、简历筛选）。
                  </li>
                  <li>
                    <b>牵头代码与用户体验重构</b
                    >，优化代码结构与性能，提升用户操作流畅度和界面交互体验，使平台响应速度提升
                    30%，用户满意度提高 25%。
                  </li>
                  <li>
                    <b>建设公司文档系统</b
                    >，规范项目文档编写，提升团队合作效率和项目管理能力。
                  </li>
                </ul>
              </div>
            </div>
            <div class="project-desc-wrapper">
              <div class="project-desc-title">项目链接</div>
              <div class="project-desc-content">
                <a-button
                  type="link"
                  href="https://ms.derkee.com/"
                  target="_blank"
                  style="padding: 0; height: fit-content"
                >
                  访问满天星平台：https://ms.derkee.com/
                </a-button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 项目卡片 - 德科信息官网 -->
      <div class="project-card">
        <div class="project-image">
          <img :src="dekeinfoOW" alt="德科信息官网" />
        </div>
        <div class="project-info-wrapper">
          <div class="project-details-wrapper">
            <div class="project-name-wrapper">
              <div class="project-name">德科信息有限公司 官方网站</div>
              <div class="project-period">2024.07 - 2025.10</div>
            </div>
            <div class="project-tech-stack-wrapper">
              <div class="project-tech-stack-title">项目技术栈</div>
              <div class="project-tech-stack">
                <a-tag>Next.js</a-tag>
                <a-tag>React</a-tag>
                <a-tag>Ant Design UI</a-tag>
                <a-tag>TypeScript</a-tag>
                <a-tag>Less</a-tag>
                <a-tag>Spring AI</a-tag>
                <a-tag>Spring Boot</a-tag>
              </div>
            </div>
            <div class="project-desc-wrapper">
              <div class="project-desc-title">项目描述</div>
              <div class="project-desc-content">
                德科信息有限公司的官方网站。
              </div>
            </div>
            <div class="project-desc-wrapper">
              <div class="project-desc-title">主要工作</div>
              <div class="project-desc-content">
                <ul>
                  <li>
                    运用 React 框架结合 <b>Next.js</b>
                    服务端渲染技术，完成德科信息有限公司官方网站页面的开发。
                  </li>
                  <li>
                    <b>设计响应式方案</b
                    >，确保网站在不同设备上（PC、平板、手机）都能正常显示和操作。
                  </li>
                  <li>
                    <b>基于DeepSeek R1本地部署</b>，使用<b>Spring AI</b
                    >开发官网智能助手,使用<b>RAG技术</b>处理公司文档知识库,7*24小时介绍公司业务。
                  </li>
                </ul>
              </div>
            </div>
            <div class="project-desc-wrapper">
              <div class="project-desc-title">项目链接</div>
              <div class="project-desc-content">
                <a-button
                  type="link"
                  href="https://www.dekeinfo.com/"
                  target="_blank"
                  style="padding: 0; height: fit-content"
                >
                  访问 德科信息有限公司 官网：https://www.dekeinfo.com/
                </a-button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 项目卡片 - 广发POC -->
      <div class="project-card">
        <div class="project-image">
          <img :src="guangfaPOC" alt="广发POC" />
        </div>
        <div class="project-info-wrapper">
          <div class="project-details-wrapper">
            <div class="project-name-wrapper">
              <div class="project-name">广发POC 等外包AI项目</div>
              <div class="project-period">2025.02 - 2025.10</div>
            </div>
            <div class="project-tech-stack-wrapper">
              <div class="project-tech-stack-title">项目技术栈</div>
              <div class="project-tech-stack">
                <a-tag>Nuxt.js</a-tag>
                <a-tag>Vue3</a-tag>
                <a-tag>Ant Design UI</a-tag>
                <a-tag>TypeScript</a-tag>
                <a-tag>Scss</a-tag>
                <a-tag>Spring AI</a-tag>
                <a-tag>Spring Boot</a-tag>
                <a-tag>Ollama</a-tag>
                <a-tag>Dify</a-tag>
                <a-tag>MaxKB</a-tag>
                <a-tag>Coze</a-tag>
              </div>
            </div>
            <div class="project-desc-wrapper">
              <div class="project-desc-title">项目描述</div>
              <div class="project-desc-content">
                广发证券POC、顺德农商银行ITO、兰州银行ITO 等外包AI项目。
              </div>
            </div>
            <div class="project-desc-wrapper">
              <div class="project-desc-title">主要工作</div>
              <div class="project-desc-content">
                <ul>
                  <li>
                    运用 Vue 框架结合 <b>Nuxt.js</b>
                    服务端渲染技术，完成广发POC、顺德农商银行ITO、兰州银行ITO
                    等外包AI项目的前端页面开发。
                  </li>
                  <li>
                    <b>自主设计AI流程框架</b
                    >，完成外包项目售前协助与技术顾问支持。
                  </li>
                  <li>
                    <b>基于MaxKB本地部署</b>，使用<b>Spring AI和RAG技术</b
                    >开发顺德农商银行ITO的智能客服。
                  </li>
                  <li>
                    <b>基于Dify本地部署</b
                    >，设计复杂工作流，实现广发POC的财报机器人的文案仿写、Excel数据生成、深交所财报收集分析。
                  </li>
                  <li>
                    <b>基于Coze工作流</b
                    >，设计复杂工作流，实现兰州银行ITO的期权机器人的询价、下单、撤单等业务功能并提供实时交易状态。
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 项目卡片 - 捉友 -->
      <div class="project-card">
        <div class="project-image">
          <img :src="drawu" alt="捉友" />
        </div>
        <div class="project-info-wrapper">
          <div class="project-details-wrapper">
            <div class="project-name-wrapper">
              <div class="project-name">捉友</div>
              <div class="project-tag">
                <a-tag color="success">毕业设计</a-tag>
              </div>
              <div class="project-period">2023.07 - 2025.07</div>
            </div>
            <div class="project-tech-stack-wrapper">
              <div class="project-tech-stack-title">项目技术栈</div>
              <div class="project-tech-stack">
                <a-tag>UniApp</a-tag>
                <a-tag>Vue3</a-tag>
                <a-tag>Vant UI</a-tag>
                <a-tag>JavaScript</a-tag>
                <a-tag>Scss</a-tag>
                <a-tag>Spring Boot</a-tag>
                <a-tag>Coze</a-tag>
              </div>
            </div>
            <div class="project-desc-wrapper">
              <div class="project-desc-title">项目描述</div>
              <div class="project-desc-content">
                《捉友》是一款AI赋能的桌游社交平台，以微信小程序为载体，创新融合AI智能助手与社交功能，通过DeepSeek大模型实现规则解析和智能推荐，解决新手用户的规则理解难题。平台集成UGC论坛和AI创作工具，采用UniApp跨端开发与Spring
                Boot架构，形成"社交+场景+AI"生态闭环，为桌游爱好者构建高效社交新场景。
              </div>
            </div>
            <div class="project-desc-wrapper">
              <div class="project-desc-title">主要工作</div>
              <div class="project-desc-content">
                <ul>
                  <li>
                    <b>作为全栈开发</b>
                    ，使用Vue、Uniapp、HTML、JavaScript、CSS技术开发前端页面；页面设计、架构设计全自主完成。
                  </li>
                  <li>
                    使用JavaSpringboot、MybatisPlus实现后端逻辑层；使用Stream流简化代码提高可读性;使用Redis实现了帖子的点赞收藏关注，可以支持500人同时操作同一个帖子。
                  </li>
                  <li>
                    使用<b>Coze+DeepSeek</b>使用作为小程序内置AI，使AI与业务深度绑定,如AI桌游助手、Al代写帖子、自动化AIGC。
                  </li>
                  <li>
                    <b>基于Dify本地部署</b
                    >，设计复杂工作流，实现广发POC的财报机器人的文案仿写、Excel数据生成、深交所财报收集分析。
                  </li>
                </ul>
              </div>
            </div>
            <div class="project-desc-wrapper">
              <div class="project-desc-title">项目荣誉</div>
              <div class="project-desc-content">
                <ul>
                  <li>项目已申领 3份 计算机软件著作。</li>
                  <li>项目已获得 2025年 中国大学生计算机设计大赛 二等奖。</li>
                  <li>项目已入围 2025年 华为开发者大赛总决赛</li>
                  <li>项目已成为 2025年 广东白云学院计算机专业优秀毕业设计</li>
                </ul>
              </div>
            </div>
            <div class="project-desc-wrapper">
              <div class="project-desc-title">项目链接</div>
              <div class="project-desc-content">
                <a-button
                  type="link"
                  href="https://ms.derkee.com/"
                  target="_blank"
                  style="padding: 0; height: fit-content"
                >
                  访问满天星平台：https://ms.derkee.com/
                </a-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const mantianxing =
  "https://person-web.obs.cn-south-1.myhuaweicloud.com/project/mantianxing.jpg";

const dekeinfoOW =
  "https://person-web.obs.cn-south-1.myhuaweicloud.com/project/dekeinfo-ow.jpg";

const guangfaPOC =
  "https://person-web.obs.cn-south-1.myhuaweicloud.com/project/guangfaPOC.png";

const drawu =
  "https://person-web.obs.cn-south-1.myhuaweicloud.com/project/drawu.jpg";

onMounted(() => {
  // 使用nextTick确保DOM已完全渲染
  nextTick(() => {
    // 创建Intersection Observer实例
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            // 当元素进入视窗时，添加动画类
            entry.target.classList.add("animate-in");
          } else {
            // 当元素离开视窗时，移除动画类，以便下次进入时可以再次播放
            entry.target.classList.remove("animate-in");
          }
        });
      },
      {
        threshold: 0.1, // 当10%的元素可见时触发
      }
    );
    // 观察所有标题容器
    const cardContainers = document.querySelectorAll(".project-card");
    cardContainers.forEach((container) => {
      observer.observe(container);
    });
  });
});
</script>

<style lang="scss" scoped>
.my-project-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: auto;
  background-color: #1d1d1f;
  padding: 0 100px;
  padding-top: 100px;
  padding-bottom: 200px;

  .module-title {
    color: #e6e6e6;
  }

  .project-card {
    display: flex;
    gap: 20px;
    width: 100%;
    margin-top: 50px;
    border-radius: 12px;
    background-color: #fff;
    position: relative;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    opacity: 0;

    .project-info-wrapper {
      position: absolute;
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      gap: 20px;
      border-radius: 6px;
      overflow: hidden;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 20%) 80%,
          rgba(0, 0, 0, 80%) 100%
        );
        border-radius: 6px;
        transition: opacity 0.5s ease-in-out;
        z-index: 1;
      }

      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 60%) 50%,
          rgba(0, 0, 0, 100%) 100%
        );
        border-radius: 6px;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
        z-index: 1;
      }

      &:hover {
        &::before {
          opacity: 0;
        }

        &::after {
          opacity: 1;
        }
      }
    }

    .project-image {
      $ratio: 0.7;
      width: calc(1920px * $ratio);
      background-color: #f0f0f0;
      border-radius: 8px;
      border: 1px solid #e6e6e6;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .project-details-wrapper {
      position: absolute;
      bottom: 0;
      display: flex;
      flex-direction: column;
      gap: 20px;
      border-radius: 6px;
      transition: all 0.5s ease-in-out;
      z-index: 2;
      transform: translateY(calc(100% - 60px)); /* 只显示项目名称部分 */
      padding: 20px;
      width: 100%;
    }

    .project-info-wrapper:hover .project-details-wrapper {
      transform: translateY(0); /* 悬停时上移，距离底部20px */
    }

    .project-name-wrapper {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;

      .project-name {
        font-size: 24px;
        font-weight: 600;
        color: #fcfcfc;
      }

      .project-tag {
        .ant-tag {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 24px;
        }
      }
    }

    .project-period {
      font-size: 14px;
      font-weight: 400;
      color: #e6e6e6;
      margin-left: auto;
    }

    .project-tech-stack-wrapper {
      display: flex;
      flex-direction: column;
      gap: 10px;

      .project-tech-stack-title {
        font-size: 16px;
        font-weight: bold;
        color: #e6e6e6;
      }

      .project-tech-stack {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;

        .ant-tag {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 24px;
          background-color: rgba(255, 255, 255, 0.2);
          border: none;
          color: #fff;
        }
      }
    }

    .project-desc-wrapper {
      display: flex;
      flex-direction: column;
      gap: 10px;

      .project-desc-title {
        font-size: 16px;
        font-weight: bold;
        color: #e6e6e6;
      }

      .project-desc-content {
        font-size: 14px;
        font-weight: 400;
        color: #e6e6e6;
        line-height: 1.5;
      }

      ul {
        padding-left: 20px;
        line-height: 1.5em;
        margin: 0px;
      }
    }
  }
}

// 当元素进入视窗时添加的动画类
.animate-in {
  animation: popIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;

  @keyframes popIn {
    0% {
      transform: scale(0.95) translateY(40px);
      opacity: 0;
    }

    100% {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
  }
}
</style>
